<template>
  <div class="my-pass">
    <el-table
      :data="scoreboard"
      style="width:100%"
      :row-style="tableRowStyle"
      :cell-class-name="tableColumnClassName"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column prop="rank" label="排名" width="60">
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            class="my-rank-el-tag"
            :color="
              scope.row.rank === 1
                ? '#1A936F'
                : 2 <= scope.row.rank && scope.row.rank <= 3
                ? '#4EA3DD'
                : 4 <= scope.row.rank && scope.row.rank <= 14
                ? '#b2bec3'
                : '#E6E24D'
            "
            >{{ scope.row.rank }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="teamName" label="球队" width="170">
        <template slot-scope="scope">
          <div class="team-name">
            <img class="team-logo" :src="scope.row.img" alt="" />
            <span class="team-name-text myColumn">
              <span @click="enterTeam(scope.row.teamId)">{{
                scope.row.teamName
              }}</span>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="games" label="场次" width="64"> </el-table-column>
      <el-table-column prop="win" label="胜" sortable width="85">
      </el-table-column>
      <el-table-column prop="draw" label="平" sortable width="85">
      </el-table-column>
      <el-table-column prop="lose" label="负" sortable width="85">
      </el-table-column>
      <el-table-column prop="goal" label="进球" sortable width="105">
      </el-table-column>
      <el-table-column prop="conceded" label="失球" width="105" sortable>
      </el-table-column>
      <el-table-column prop="difference" label="净胜球" width="130" sortable>
      </el-table-column>
      <el-table-column prop="points" label="积分" width="60"> </el-table-column>
      <el-table-column prop="recentResult" label="最近5场" width="216">
        <template slot-scope="scope">
          <el-tooltip
            v-for="(item, index) in scope.row.recentResult"
            :key="index"
            class="item"
            effect="light"
            :content="item.battle"
            placement="top"
            transition="el-zoom-in-bottom"
            :open-delay="300"
          >
            <el-tag
              @click="enterMatch(item.matchId)"
              effect="dark"
              class="my-el-tag"
              :type="
                item.result === 1
                  ? 'success'
                  : item.result === 2
                  ? 'info'
                  : 'danger'
              "
              >{{
                item.result === 1 ? "W" : item.result === 2 ? "D" : "L"
              }}</el-tag
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-annotate">
      <div class="champions-league"></div>
      <span>亚冠正赛</span>
      <div class="play-off"></div>
      <span>亚冠附加赛</span>
      <div class="relegation"></div>
      <span>降级</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ScoreTable",
  data() {
    return {
      //联赛Id，中超是6
      leagueId: 6,
      //积分榜数据
      scoreboard: [],
    };
  },
  props: {
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  watch: {
    season: {
      handler(newSeason) {
        this.getSeasonScoreList(parseInt(newSeason));
      },
      immediate: true,
    },
  },
  methods: {
    //获取某个赛季的积分榜
    async getSeasonScoreList(seasonId) {
      const leagueId = this.leagueId;
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/aboutmatches/scorelist/${leagueId}/${seasonId}`
      );
      this.scoreboard = data;
    },

    //设置单个单元格的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (
        rowIndex === 0 &&
        (columnIndex === 3 ||
          columnIndex === 4 ||
          columnIndex === 5 ||
          columnIndex === 6 ||
          columnIndex === 7 ||
          columnIndex === 8)
      ) {
        return {
          "background-color": "#F1F6F9",
          "padding-left": "21px",
          "padding-top": "20px",
        };
      }
      return { "background-color": "#F1F6F9" };
    },

    //设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return { "background-color": "#F1F6F9" };
    },

    //设置指定单元格的ClassName,返回的class不能写在当前组件，要写在全局
    //全局css样式在assets/css/reset.css里面
    tableColumnClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return "myColumn";
      }
      return "";
    },

    //点击最近5场比赛进入比赛详细界面
    enterMatch(matchId) {
      this.$router.push({ name: "matchReport", params: { matchId } });
    },
    //点击球队进入具体球队
    enterTeam(teamId) {
      this.$router.push({ name: "singleTeam", params: { teamId } });
    },
  },
};
</script>

<style scoped>
.my-pass {
  width: 1165px;
  height: 821px;
  color: #656f73;
  /*background-color: blue;*/
  margin: auto;
}
.my-el-tag {
  cursor: pointer;
  margin-left: 3px;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 4px 0;
  line-height: 20px;
  font-size: 14px;
  border-width: 0;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
}
.my-rank-el-tag {
  margin-left: 3px;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 4px 0;
  line-height: 20px;
  font-size: 14px;
  border-width: 0;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
}
.table-annotate {
  width: 350px;
  height: 40px;
  /*background-color: red;*/
  margin-left: 17px;
  /*margin-top: 10px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.champions-league {
  width: 25px;
  height: 25px;
  background-color: #1a936f;
  border-radius: 4px;
}
.play-off {
  width: 25px;
  height: 25px;
  background-color: #4ea3dd;
  border-radius: 4px;
}
.relegation {
  width: 25px;
  height: 25px;
  background-color: #e6e24d;
  border-radius: 4px;
}
.team-name {
  display: flex;
  /*justify-content: space-around;*/
  align-items: center;
  /*margin-left: 3px;*/
  /*background-color: red;*/
}
.team-logo {
  width: 30px;
  height: 30px;
  margin-left: 24px;
}
.team-name-text {
  margin-left: 7px;
}
.active {
  /*color: #606266;*/
  /*text-decoration: none;*/
}
.my-pass /deep/ .el-table td {
  padding: 7px 0; /*no*/
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}
.my-pass /deep/ .el-table th {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.my-pass /deep/ .is-leaf {
  padding: 14px 0; /*no*/
  font-weight: bold;
  color: #909399;
}
</style>
